<!-- ETF交易 - 列表 -->
<template>
  <div class="tetf-list">
    <!-- 头部导航 以前是放在fp.vue中 用于解决 导航与内容的对应 -->
    <tab :line-width=2 active-color='#fea620' v-model="index">
      <tab-item v-for="(tab, index) in tabList" @on-item-click="tabChange(index)" :key="index">{{tab}}</tab-item>
    </tab>
    <search v-model="keyword" position="absolute" auto-scroll-to-top top="46px" ref="search" @on-change="getSearchList(keyword)">
      <span class="calendar" slot="left" @click="visibility=true"></span>
    </search>
    <div class="fp-list">
      <div class="fp-list-title">推荐项目</div>
      <div class="item" v-for="(item, index) in tetfList" :key="index">
        <div class="item-title">
          <div class="name">{{item.name}}</div>
          <div class="label-group">
            <span class="label" :class="{red: label === '未锁定', yellow: label.search(/周期/i) !== -1, green: label.search(/净值/i) !== -1}"
              v-for="(label, labelIndex) in item.content" :key="labelIndex">{{label}}</span>
          </div>
        </div>
        <div class="item-content">
          <div class="left transaction" style="background: #fff">
            <div class="transaction-orderid">
              <span class="orderid-text">订单编号</span>
              <span class="orderid-value">{{item.orderid | orderidEncrypt}}</span>
            </div>
            <div class="transaction-date">
              <span class="date-text">购买时间</span>
              <span class="date-value">{{item.date | YYYYMMDD('.')}}</span>
            </div>
          </div>
          <div class="right">
            <span class="btn" @click="buy(item)">{{item.btn}}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="display: none">
      <datetime v-model="keyword" :show.sync="visibility" @on-change="changeTime(keyword)"></datetime>
    </div>
    <tabbar :isMainFp='true'></tabbar>
  </div>
</template>
<script>
  import { Search, Datetime } from 'vux'
  import { products } from '../../../service/product'
  import Tabbar from '../../../components/common/Tabbar'
  import { Tab, TabItem, Swiper, SwiperItem } from 'vux'
  import http from '../../../service/http.js'
  import tips from '../../../service/tips'
  export default {
    components: {
      Search,
      Datetime,
      Tabbar,
      Tab,
      TabItem,
      Swiper,
      SwiperItem
    },
    data() {
      return {
        visibility: false,
        tetfList: [], // 列表
        keyword: '', // 关键字
        index: 7,
        tabList: ['稳赢基金','币余宝', '智能投顾', 'ETF指数', 'OTC套利', 'BTC指数', 'ICO基金', 'ETF交易', 'BTC交易']
      }
    },
    async created() {
      await this.getTetfList()
    },
    methods: {
      tabChange(index) {
        this.index = index;
        let fpPaths = ['winList','digList', 'aiList', 'etfList', 'otcList', 'btcList', 'icoList', 'tetfList', 'tbtcList']
        this.$router.push({ path: `/main/fp/${fpPaths[index]}` })
      },
      // 立即投资
      buy(item) {
        if (item.btn == '已锁定') {
          return false;
        }
        this.$store.dispatch("setData", item);
        this.$router.push({ path: "/pay", query: { type: "tetf", money: item.btn } })
      },
      // dig列表
      async getTetfList() {
        const res = await products('TETF', this.search)
        if (res['TETF'].length) {
          this.tetfList = res['TETF']
        } else {
          if (this.search) {
            alert('未查询到任何结果')
          } else {
            console.log('暂无数据')
          }
        }
      },
      // 日期搜索
      changeTime(text) {
        this.getSearchList(text)
      },
      // 搜索列表
      getSearchList(text) {
        http.get("/product/products?type=TETF&search=" + text).then((res) => {
          if (res.status == 200) {
            this.tetfList = res.data.TETF;
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      }
    }
  }
</script>

<style lang="less">
  @import "../../../../static/styles/fp-list";
  .calendar {
    width: 32px;
    height: 28px;
    display: inline-block;
    background-image: url("../../../assets/calendar.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .tetf-list {
    background: #fff;
  }

  .tetf-list .weui-search-bar {
    position: relative;
    padding: 8px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff !important;
  }
</style>